/* global vars */
var COUNT = 0;
var COUNT_BOX = 0;
var ARR_ICON = [
    "./img/Aatrox.png",
    "./img/Aatrox.png",
    "./img/Ahri.png",
    "./img/Ahri.png",
    "./img/Akali.png",
    "./img/Akali.png",
    "./img/Azir.png",
    "./img/Azir.png",
    "./img/Evelynn.png",
    "./img/Evelynn.png",
    "./img/Galio.png",
    "./img/Galio.png",
    "./img/Irelia.png",
    "./img/Irelia.png",
    "./img/Janna.png",
    "./img/Janna.png",
    "./img/Pantheon.png",
    "./img/Pantheon.png",
    "./img/Rakan.png",
    "./img/Rakan.png",
    "./img/Talon.png",
    "./img/Talon.png",
    "./img/Yuumi.png",
    "./img/Yuumi.png"
]

/* render */
function render_random(counts) {
    var index_of_hero = (counts)*4;
    COUNT_BOX = index_of_hero;
    var arr_data = [];
    for (let index = 0; index < index_of_hero; index++) {
        arr_data[index] = ARR_ICON[index];
    }
    var arr_sup = mess_index(index_of_hero);
    var mod = '';
    for (let index = 0; index < index_of_hero; index++) {
        mod += `
        <div class="col-xs-3">
            <div class="card_box"><img src="${arr_data[arr_sup[index]]}" alt=""></div>
            <div class="card_back"></div>
        </div>
        `
    }
    $('.row').html(mod)
}

/* data */
function receive() {
    var str = location.search;
    var num = parseInt(str[str.length-1]);
    return num;    
}

/* card_box add event listener */
/* 1.counter 2.rotate 3.dismiss together */
function add_card_listener() {
    $('.col-xs-3').on('click', function(elem){
        /* 1. counter */
        COUNT++;
        console.log(COUNT_BOX);
        $('.title > p > em').html(COUNT);
        /* 2. rotate() */
        $($(this).children()[1]).css({
            'transition': 'all, .5s, .0s',
            'transform': 'rotateY(90deg)'
        })
        $($(this).children()[0]).css({
            'transition': 'all, .5s, .5s',
            'transform': 'rotateY(0deg)'
        })
        /* 3. dismiss together */
        this.classList.add('choose');
        if (COUNT%2 == 0) {
            judge_event();
        }
        if (COUNT_BOX == 0) {
            var timer_end = setTimeout(function(){
                game_success();
                clearTimeout(timer_end)
            }, 1500)
        }
    })
}

function judge_event() {
    var arr_choose = document.querySelectorAll('.choose')
    if (arr_choose.length == 2) {
        var card1_font = $($(arr_choose[0]).children()[0])
        var card1_back = $($(arr_choose[0]).children()[1])
        var card2_font = $($(arr_choose[1]).children()[0])
        var card2_back = $($(arr_choose[1]).children()[1])
    
        var src1 = card1_font.children().attr('src');
        var src2 = card2_font.children().attr('src');
    
        console.log(src1, src2);
        if (src1 == src2) {
            console.log('yes');
            COUNT_BOX = COUNT_BOX - 2;
            var timer_true = setTimeout(function(){
                card1_font.css({'display':'none'});
                card2_font.css({'display':'none'});
                card1_back.css({'display':'none'});
                card2_back.css({'display':'none'});
                clearTimeout(timer_true)
            }, 900)
        } else {
            console.log('no');
            var timer_false = setTimeout(function(){
                card1_font.css({'transition': 'all, .5s, .0s','transform': 'rotateY(90deg)'});
                card2_font.css({'transition': 'all, .5s, .0s','transform': 'rotateY(90deg)'});
                card1_back.css({'transition': 'all, .5s, .5s','transform': 'rotateY(0)'});
                card2_back.css({'transition': 'all, .5s, .5s','transform': 'rotateY(0)'});
                clearTimeout(timer_false)
            }, 900)
        }
    }else{
        $($(arr_choose[0]).children()[0]).css({'transition': 'all, .5s, .0s','transform': 'rotateY(90deg)'})
        $($(arr_choose[0]).children()[1]).css({'transition': 'all, .5s, .5s', 'transform': 'rotateY(0)'})
    }
    for (let index = 0; index < arr_choose.length; index++) {
        arr_choose[index].classList.remove('choose');   
    }

}

function game_success() {
    $('.notice > p > em').html(COUNT);
    $('.notice').css({'display':'block'});
}

/* tools */
function generate_random_differ(len) {
    var arr_return = [];
    while (arr_return.length < len) {
        var num = Math.floor(Math.random() * 18);
        if (arr_return.includes(num)) {
            continue;
        } else {
            arr_return.push(num);
        }
    }
    return arr_return;
}
function mess_index(len) {
    var arr_return = [];
    var arr_source = [];
    for (let index = 0; index < len; index++) {
        arr_source.push(index);
    }
    for (let index = 0; index < len; index++) {
        var new_index = Math.floor(Math.random() * arr_source.length)
        arr_return.push(arr_source[new_index]);
        arr_source.splice(new_index, 1);
    }
    return arr_return;
}
function reload() {
    location.reload()
}

render_random(receive()+1);
add_card_listener();

